<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻资讯</title>
  <!-- 样式文件引入 -->
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="tab.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- 上部分-页面标题 -->
  <div class="top">天气预报</div>
  <!-- 中间部分-Tab切换栏目 -->
  <div class="tab">
    <ul>
      <li class="current">未来七天天气</li>
      <li class="particulars">详情</li>
    </ul>
  </div>
  <div class="tabsbox" id="tab" style="display: block;">
    <!-- 标签 -->
    <nav class="firstnav">
      <ul>
        <li class="liactive">
          <span>广州市</span><span class="iconfont icon-close"></span>
        </li>
        <li class="dongguang" style="display: block;">
          <span>东莞市</span><span class="iconfont icon-close"></span>
        </li>
        <li class="jieyang">
          <span>揭阳市</span><span class="iconfont icon-close"></span>
        </li>
      </ul>
      <div class="tabadd"><span style="font-weight: 600;font-size:larger;">+</span></div>
    </nav>
    <!-- 内容 -->
    <div class="tabscon">
      <section class="conactive" style="display: block;">
        <div class="left">
          <h1></h1>
          <h2></h2>
          <h3></h3>
          <h4></h4>
          <h5></h5>
        </div>
      </section>
      <section class="dg" style="display: none;">
        <div class="left">
          <h1></h1>
          <h2></h2>
          <h3></h3>
          <h4></h4>
          <h5></h5>
        </div>
      </section>
      <section>
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
      </section>
    </div>
    <div class="left" style="display:none;">
      <h5>17:28</h5>
      <h5>星期</h5>
      <h1>市</h1>
    </div>
  </div>
  <div class="container-2" style="display:block;">
    <!-- 新闻内容  -->
    <div class="card">
      <!-- 左边图片 -->
      <div class="left">
        <h5>17:28</h5>
        <h5>星期</h5>
        <h1>市</h1>
      </div>
      <!-- 右边文本 -->
      <div class="right">
        <h1>33C</h1>
      </div>
    </div>
  </div>

  <div class="weal">
    <div class="tet">
      <br>
      <input type="text" id="findMsg" name="findMsg" placeholder="请输入城市" value="">
      <button id="messageSearchBtn">查询</button>
    </div>
    <div class="neirong" style="text-align: left;display: block;">
      <table class="biao" style="margin:100px ;text-align: center;">
        <tr>
          <td class="fir">地区:</td>
          <td>日期:</td>
          <td>星期:</td>
          <td>早晚天气变化:</td>
          <td> 实时天气:</td>
        </tr>
        <tr>
          <td>最低温:</td>
          <td>最高温:</td>
          <td>风向:</td>
          <td>风向角度:</td>
          <td>风速:</td>
        </tr>
        <tr>
          <td>风力:</td>
          <td>日出时间</td>
          <td>日落时间:</td>
          <td>月升时间:</td>
          <td>月落时间:</td>
        </tr>
        <tr>
          <td>降雨量:</td>
          <td>降雨概率:</td>
          <td>紫外线强度指数:</td>
          <td>能见度:</td>
          <td>相对湿度:</td>
        </tr>
      </table>
      <div class="tips" style="font-size: 30px;">生活指数提示:<h1></h1>
      </div>
    </div>
  </div>
  <!-- JQuery库文件引入 -->
  <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- JS文件引入 -->
  <script src="index.js"></script>
  <script src="tab-12.3.5.js"></script>
</body>

</html>